const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {
	VueLoaderPlugin
} = require('vue-loader')
const wpModule = require('./config.module')

const {
	index,
	PATHS,
	template,
	publicPath,
	pathsToClean,
	cleanOptions,
} = require('./utils')

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {

	entry: {
		app: ['babel-polyfill', PATHS.resolveSrc('main.js')],
	},

	output: {
		filename: PATHS.assets("js/[name].js"),
		chunkFilename: PATHS.assets('js/[name].[chunkhash].js'),
		path: PATHS.output,
		publicPath,
	},

	module: wpModule,

	resolve: {
		extensions: ['.js', '.json', 'jsm', '.css', '.less', '.scss', '.sass', '.jsx', '.vue'],
		alias: {
			'@': PATHS.src,
			'@ass': PATHS.resolveSrc('assets'),
			'@css': PATHS.resolveSrc('assets/css'),
			'@font': PATHS.resolveSrc('assets/font-awesome'),
			'@img': PATHS.resolveSrc('assets/images'),
			'@comps': PATHS.resolveSrc('components'),
			'@utils': PATHS.resolveSrc('utils'),
			'@pl': PATHS.resolveSrc('vue-plugins'),
			'@coms': PATHS.resolveSrc('utils/commons'),
		},
	},

	plugins: [
		// new CleanWebpackPlugin(pathsToClean, cleanOptions),

		new VueLoaderPlugin(),

		new MiniCssExtractPlugin({
			// Options similar to the same options in webpackOptions.output
			// both options are optional
			filename: PATHS.assets('css/[name].[hash].css'),
			chunkFilename: PATHS.assets('css/[name].[hash].css'),
		}),

		new HtmlWebpackPlugin({
			filename: index,
			// Required
			inject: true,
			// template: require('html-webpack-template'),
			// template: 'index.html',
			template,
			// Optional
			appMountId: 'app',
			title: 'Dbmonitor Dashboard',
			// favicon: path.join(PATHS.src, 'favicon.ico'),
			meta: [{
				name: 'description',
				content: 'Bootstrap DB Monitor Dashboard'
			}, {
				name: 'keyword',
				content: 'Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina'
			}],
			mobile: true,
			lang: 'en-US',
			inlineManifestWebpackName: 'webpackManifest',
			minify: {
				collapseWhitespace: true,
				conservativeCollapse: true,
				preserveLineBreaks: true,
				useShortDoctype: true,
				html5: true
			}
		}),
	],

}